<style lang="scss" scoped>
.ps {
    // background-color: #408de0;
}

.notice-swipe {
    height: 40px;
    line-height: 40px;
}
</style>

<template>
    <div>
        <div v-if="cartList.length > 0">
            <van-nav-bar left-arrow title="复诊开方药品记录" @click-left="$router.go(-1)" />
            <div v-for="(item, index) in cartList" :key="index"
                style="display: flex;min-height:100px; border-bottom: 1px solid #f1f1f1;padding: 0 10px;background-color: #fff;border-radius: 5px;">
                <img :src="item.restorativesimage" alt="" style="flex-shrink: 0; width: 80px;" height="80">
                <div style="margin-left: 10px;">
                    <h3 style="line-height: 30px;"> {{ item.restorativesname }}</h3>
                    <p style="line-height: 30px;">
                        <span>药品类型:{{ item.restorativestitle }},</span>
                        <span>药品:{{ item.restorativesstate }}</span>
                    </p>

                    <div style="height: 40px;">
                        <span style="color: red;">￥{{ item.restorativesprice }}元</span>
                    </div>
                </div>
            </div>
        </div>


        <div style="padding: 10px;" v-else>
            <van-nav-bar left-arrow title="复诊开方" @click-left="$router.go(-1)" />
            <van-notice-bar left-icon="volume-o" :scrollable="false">
                <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
                    <van-swipe-item>急重症患者不适合网上诊疗/咨询，请前往医生就诊</van-swipe-item>
                    <van-swipe-item>公益通告：为了更好服务您，即日起您点击医生的“复诊开方”按钮产生的问诊费用均由平台承担！</van-swipe-item>
                </van-swipe>
            </van-notice-bar>
            <van-empty image="error" description="暂无用药记录" style="height: 200px;" />
            <p class="ps" style="font-size: 15px;text-align: center;color: #408de0;">
                复诊开方只面向在平台有医生开具用药记录的患者！
                你可以先根据当前病情状况找到对应擅长的医生，订
                购其图文咨询服务，在问诊中医生将根据您的病情描
                述需要开具用药建议！后续若还有用药需求，就可以
                直接进入开药门诊申请复诊开方！
            </p>
            <p style="line-height: 50px; text-align: center;font-size: 15px;">知道怎么找医生</p>
            <p>
                <van-button type="success" style="width: 100%;" @click="$router.push('/specialists')">立即问医生</van-button>
            </p>
            <p style="line-height: 50px; text-align: center;font-size: 15px;">不知道怎么找医生</p>
            <p>
                <van-button type="primary" style="width: 100%;" @click="$router.push('/help')">联系妙手助理</van-button>
            </p>

        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useCartStore } from '@/stores/cart';

// 使用购物车store
const userStore = useCartStore()
// 计算属性，获取购物车列表
const cartList = computed(() => userStore.cartList)

</script>